<div class="febs-container" id="febs-role">
    <div class="febs-body layui-fluid"  lay-title="角色管理">
        <div class="febs-body-search">
            <form class="layui-form layui-table-form" lay-filter="role-table-form" id="role-table-form">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <div class="layui-inline" id="role-tenant" th:classappend="${hasHeadCompanyRole } ? '' : 'febs-hide'">
                                <label class="layui-form-label layui-form-label-sm">公司名称</label>
                                <div class="layui-input-inline" >
                                    <select name="tenantId" id="tenantId" lay-search="" >
                                        <option th:each="item:${tenantList }"
                                                th:value="${item.tenantId}" th:text="${item.tenantName}"
                                                th:selected="${tenant.tenantId ==item.tenantId}">
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label layui-form-label-sm">角色名称</label>
                                <div class="layui-input-inline" style="width:190px;">
                                    <input type="text" name="roleName" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label layui-form-label-sm">状态</label>
                                <div class="layui-input-inline">
                                    <select name="roleStatus" id="roleStatus" lay-search="">
                                        <option value="">请选择</option>
                                        <option value="0">禁用</option>
                                        <option value="1" selected>启用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label layui-form-label-sm">角色类型</label>
                                <div class="layui-input-inline">
                                    <select name="queryRoleStatus" id="queryRoleStatus" lay-search="">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline" th:if="${utype eq '0'}">
                                <label class="layui-form-label layui-form-label-sm">授予</label>
                                <div class="layui-input-inline" style="width:190px;">
                                    <select name="utype">
                                        <option value="0" th:if="${utype eq '0'}">管理员用户</option>
                                        <option value="1" th:if="${utype le '1'}">机构用户</option>
                                        <option value="2" th:if="${utype le '2'}">分支机构用户</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div id="query" class="layui-btn">
                                    <em class="layui-icon">&#xe615;</em> 查询
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="febs-table-full">
            <table lay-filter="roleTable" lay-data="{id: 'roleTable'}"></table>
        </div>
    </div>
</div>
<script type="text/html" id="role-toolbar">
    <div lay-event="add" shiro:hasPermission="role:add" class="layui-btn layui-btn-sm">
        <em class="layui-icon">&#xe654;</em> 新增
    </div>
</script>

<script data-th-inline="javascript">
    var hasHeadCompanyRole = [[${hasHeadCompanyRole}]];
    var tenant = [[${tenant}]];
    var roleTypeList = [[${roleTypeList }]];
</script>

<script type="text/html" id="status-bar">
    <input type="checkbox" name="roleStatus" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用"
           lay-filter="roleStatus" lay-event="statusEvent"  {{ d.status == '1' ? 'checked' : '' }} />
</script>

<script type="text/html" id="role-types">
    {{#
    var types = {
    "2": {title: '分支机构用户'},
    "1": {title: '机构用户'},
    "0": {title: '管理员用户'}
    };
    }}
    <span>{{ d.utype ? types[d.utype]['title'] : '' }}</span>
</script>
<script type="text/html" id="role-option">
    <span shiro:lacksPermission="role:update,role:delete">
        <span class="layui-badge-dot febs-bg-orange"></span> 无权限
    </span>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-primary layui-border-orange" lay-event="edit" shiro:hasPermission="role:update">
        <i class="layui-icon layui-icon-edit"></i>
        编辑
    </button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="del" shiro:hasPermission="role:delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>
<script data-th-inline="none" type="text/javascript">
    layui.use(['jquery',  'febs', 'form', 'table', 'commonJS', 'validate','formSelects'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            commonJS = layui.commonJS,
            validate = layui.validate,
            $view = $('#febs-role'),
            $query = $view.find('#query'),
            $queryRoleStatus = $view.find('#queryRoleStatus'),
            $searchForm = $view.find('#role-table-form'),
            tableIns;

        form.verify(validate);
        form.render();

        initTable();
        initDictItemSelect_roleList();

        function initTable() {
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'roleTable',
                height:  getTableHeight(),
                skin: '',
                url: ctx + 'role/list',
                where:getQueryParams(),
                cols: [[
                    {type: 'numbers', title: '序号'},
                    {field: 'tenantName', title: '公司名称', minWidth: 200 ,hide:!hasHeadCompanyRole},
                    {field: 'roleName', title: '角色名称', minWidth: 160},
                    {field: 'roleType', title: '角色类型', width: 120,align:'center',
                        templet:function (d) {
                            let roleTypeName = febs.getDictLabel(roleTypeList,d.roleType);
                            return roleTypeName;
                        }
                    },
                    {field: 'status', title: '状态', align:'center', toolbar: '#status-bar'  ,width: 110  },
                    {field: 'remark', title: '角色描述',minWidth: 280,},
                    {title: '操作', toolbar: '#role-option', width: 160,align:'center',}
                ]],
                toolbar: '#role-toolbar',
                defaultToolbar: []
            });
        }

        table.on('toolbar(roleTable)', function (obj) {
            if (obj.event === 'add') {
                febs.modal.open('新增角色', 'system/role/add', {
                    btn: ['提交', '取消'],
                    area: [$(window).width() <= 750 ? '90%' : '600px','90%'],
                    yes: function (index, layero) {
                        $('#role-edit').find('#submit').trigger('click');
                    },
                    btn2: function () {
                        layer.closeAll();
                    },
                    data:{
                        tenantId: hasHeadCompanyRole ? $searchForm.find('select[name="tenantId"]').val() : tenant.tenantId,
                        tenantName: hasHeadCompanyRole ? $searchForm.find('select[name="tenantId"]').find('option:selected').text().trim() : tenant.tenantName
                    }
                });
            }
        });

        $query.on('click', function () {
            tableIns.reload({where: getQueryParams(), page: {curr: 1}});
        });

        function getQueryParams() {
            return {
                roleName: $searchForm.find('input[name="roleName"]').val()?.trim(),
                utype: $searchForm.find('select[name="utype"]').val(),
                tenantId: $searchForm.find('select[name="tenantId"]').val(),
                status: $searchForm.find('select[name="roleStatus"]').val(),
                roleType: $searchForm.find('select[name="queryRoleStatus"]').val(),
                invalidate_ie_cache: new Date()
            };
        }

        function deleteRoles(roleIds) {
            febs.get(ctx + 'role/delete/' + roleIds, null, function () {
                febs.alert.success('删除角色成功');
                $query.trigger('click');
            })
        }


        $(window).resize(function () {

        });


        function updateRoleStatus(roleId,status) {
            //更新角色状态
            let model={
                roleId : roleId,
                status : status
            }
            febs.get(ctx + 'role/updateRoleStatus', model, function () {
                febs.alert.success('修改角色状态成功');
            })
        }


        form.on('switch(roleStatus)', function (obj) {
            //角色状态控制点击事件
            var checked = obj.elem.checked;
            var status;
            if (checked) {
                status = "1";
            } else {
                status = "0";
            }
            //获取该控件所在行
            var index = obj.othis.parents('tr').eq(0).data('index');
            //获取表中所有数据 按行取数据及其 roleId
            var roleId =  table.cache['roleTable'][index].roleId;

            febs.modal.confirm('更改角色状态', '确认更改角色状态',function (){
                updateRoleStatus(roleId,status);
            },function (){
                obj.elem.checked = !checked;
                layer.closeAll();
                form.render();
            });

        });

        table.on('tool(roleTable)', function (obj) {
            //表格编辑删除事件
            var roleId = obj.data.roleId;
            var layEvent = obj.event;
            if (layEvent === 'edit') {
                febs.modal.open('修改角色', 'system/role/update/' + roleId, {
                    btn: ['提交', '取消'],
                    area: [$(window).width() <= 750 ? '90%' : '600px','90%'],
                    yes: function (index, layero) {
                        $('#role-edit').find('#submit').trigger('click');
                    },
                    btn2: function () {
                        layer.closeAll();
                    },
                });
            } else if (layEvent === 'del') {
                febs.modal.confirm('删除角色', '确定删除所选角色？', function () {
                    deleteRoles(roleId);
                });
            }
        })

        function initDictItemSelect_roleList(){
            //角色类型
            febs.initDictItemSelect($queryRoleStatus,'SYSTEM_ROLE_TYPE','',null);
        }

        function getTableHeight() {
            return commonJS.calcTableHeight(10);
        }

        $(window).resize(function () {
            tableIns.reload({height: getTableHeight()});
        });
    });
</script>